<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Работа с регионами</title>
</head>
<body>

<h1>Создание Региона</h1>
<form id="createRegionForm">
    <h1 id="regionSuccess"></h1>
    <input type="text" id="regionName" placeholder="Название региона" required>
    <input type="text" id="parentRegion" placeholder="Родительский регион">
    <input type="number" id="regionType" placeholder="Тип региона">
    <input type="number" id="latitude" placeholder="Широта" step="any" required>
    <input type="number" id="longitude" placeholder="Долгота" step="any" required>
    <input type="number" id="latitude1" placeholder="Широта1" step="any" required>
    <input type="number" id="longitude1" placeholder="Долгота1" step="any" required>
    <button type="submit">Создать регион</button>
</form>

<form id="getRegionForm">
    <h1 id="getRegionSuccess"></h1>
    <input type="number" id="getRegionId" placeholder="Идентификатор региона" required>
    <button type="submit">Получить регион</button>
</form>

<form id="editRegionForm">
    <h1 id="editRegionSuccess"></h1>
    <input type="number" id="editRegionId" placeholder="Идентификатор региона" required>
    <input type="text" id="editName" placeholder="Новое название региона" required>
    <input type="text" id="editParentRegion" placeholder="Новый родительский регион">
    <input type="number" id="editRegionType" placeholder="Новый тип региона">
    <input type="number" id="editLatitude" placeholder="Новая широта" step="any" required>
    <input type="number" id="editLongitude" placeholder="Новая долгота" step="any" required>
    <input type="number" id="editLatitude1" placeholder="Новая широта1" step="any" required>
    <input type="number" id="editLongitude1" placeholder="Новая долгота1" step="any" required>
    <button type="submit">Редактировать регион</button>
</form>

<form id="deleteRegionForm">
    <h1 id="deleteRegionSuccess"></h1>
    <input type="number" id="deleteRegionId" placeholder="Идентификатор региона" required>
    <button type="submit">Удалить регион</button>
</form>

<div id="regionInfo">
    <h2>Информация о регионе:</h2>
    <p id="regionId"></p>
    <p id="regionDataName"></p>
    <p id="regionParentRegion"></p>
    <p id="regionDataType"></p>
    <p id="regionLatitude"></p>
    <p id="regionLongitude"></p>
    <p id="regionLatitude1"></p>
    <p id="regionLongitude1"></p>
</div>

<script>
    const createRegionForm = document.getElementById('createRegionForm');
    const getRegionForm = document.getElementById('getRegionForm');
    const editRegionForm = document.getElementById('editRegionForm');
    const deleteRegionForm = document.getElementById('deleteRegionForm');

    createRegionForm.addEventListener('submit', function (event) {
        event.preventDefault();

        const name = document.getElementById('regionName').value;
        const parentRegion = document.getElementById('parentRegion').value;
        const regionType = document.getElementById('regionType').value;
        const latitude = document.getElementById('latitude').value;
        const longitude = document.getElementById('longitude').value;
        const latitude1 = document.getElementById('latitude1').value;
        const longitude1 = document.getElementById('longitude1').value;

        const data = JSON.stringify({
            name: name,
            parentRegion: parentRegion,
            regionType: regionType,
            latitude: latitude,
            longitude: longitude,
            latitude1: latitude1,
            longitude1: longitude1
        });

        const params = {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: data
        };

        fetch('/region', params)
            .then(response => {
                if (response.status === 201) {
                    document.getElementById("regionSuccess").innerText = "Регион успешно создан!";
                    return response.json();
                } else {
                    document.getElementById("regionSuccess").innerText = "Ошибка при создании региона!";
                }
            })
            .catch((error) => {
                console.error('Ошибка:', error);
                document.getElementById("regionSuccess").innerText = "Ошибка при создании региона!";
            });
    });

    getRegionForm.addEventListener('submit', function (event) {
        event.preventDefault();

        const regionId = document.getElementById('getRegionId').value;

        fetch(`/region/${regionId}`)
            .then(response => {
                if (response.status === 200) {
                    document.getElementById("getRegionSuccess").innerText = "Регион успешно получен!";
                    return response.json();
                } else {
                    document.getElementById("getRegionSuccess").innerText = "Ошибка при получении региона!";
                }
            })
            .then(data => {
                document.getElementById("regionId").innerText = data.id;
                document.getElementById("regionDataName").innerText = data.name;
                document.getElementById("regionParentRegion").innerText = data.parentRegion;
                document.getElementById("regionDataType").innerText = data.regionType;
                document.getElementById("regionLatitude").innerText = data.latitude;
                document.getElementById("regionLongitude").innerText = data.longitude;
                document.getElementById("regionLatitude1").innerText = data.latitude1;
                document.getElementById("regionLongitude1").innerText = data.longitude1;
            })
            .catch((error) => {
                console.error('Ошибка:', error);
                document.getElementById("getRegionSuccess").innerText = "Ошибка при получении региона!";
            });
    });


    editRegionForm.addEventListener('submit', function (event) {
        event.preventDefault();

        const regionId = document.getElementById('editRegionId').value;
        const name = document.getElementById('editName').value;
        const parentRegion = document.getElementById('editParentRegion').value;
        const regionType = document.getElementById('editRegionType').value;
        const latitude = document.getElementById('editLatitude').value;
        const longitude = document.getElementById('editLongitude').value;
        const latitude1 = document.getElementById('editLatitude1').value;
        const longitude1 = document.getElementById('editLongitude1').value;

        const data = JSON.stringify({
            name: name,
            parentRegion: parentRegion,
            regionType: regionType,
            latitude: latitude,
            longitude: longitude,
            latitude1: latitude1,
            longitude1: longitude1
        });

        const params = {
            method: 'PUT',
            headers: {
                'Content-Type': 'application/json'
            },
            body: data
        };

        fetch(`/region/${regionId}`, params)
            .then(response => {
                if (response.status === 200) {
                    document.getElementById("editRegionSuccess").innerText = "Регион успешно отредактирован!";
                    return response.json();
                } else {
                    document.getElementById("editRegionSuccess").innerText = "Ошибка при редактировании региона!";
                }
            })
            .catch((error) => {
                console.error('Ошибка:', error);
                document.getElementById("editRegionSuccess").innerText = "Ошибка при редактировании региона!";
            });
    });

    deleteRegionForm.addEventListener('submit', function (event) {
        event.preventDefault();

        const regionId = document.getElementById('deleteRegionId').value;

        const params = {
            method: 'DELETE',
            headers: {
                'Content-Type': 'application/json'
            }
        };

        fetch(`/region/${regionId}`, params)
            .then(response => {
                if (response.status === 200) {
                    document.getElementById("deleteRegionSuccess").innerText = "Регион успешно удален!";
                } else {
                    document.getElementById("deleteRegionSuccess").innerText = "Ошибка при удалении региона!";
                }
            })
            .catch((error) => {
                console.error('Ошибка:', error);
                document.getElementById("deleteRegionSuccess").innerText = "Ошибка при удалении региона!";
            });
    });
</script>


</body>
</html>